<template>
<xdh-panel class="base-info-block" theme="primary"  shadow footer-height="auto">
  <template slot="tool">
    <el-button type="primary" size="mini">新增</el-button>
    <el-button type="warning" size="mini">发布</el-button>
  </template>
  <div class="base-info">
    <div class="base-info-right">
      <switch-image></switch-image>
    </div>
    <div class="base-info-left">
      <div class="person-info key-value-infos-table">
        <div class="table-item">
          <strong class="label">标签</strong>
          <div class="value"><edit-tags size="small"></edit-tags></div>
        </div>
          
        <div class="table-item half"> 
          <strong class="label">姓名</strong>
          <span class="value">黄吉平</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">性别</strong>
          <span class="value">男</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">身 份  证</strong>
          <span class="value">330972198012123214</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">年龄</strong>
          <span class="value">男37</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">联系电话</strong>
          <span class="value">15920323211（北京）, 15920323211（广东）</span>
        </div>

        <div class="table-item half"> 
          <strong class="label">出  生  地</strong>
          <span class="value">北京市</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">籍贯</strong>
          <span class="value">北京市</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">工作单位</strong>
          <span class="value">广东电视台</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">户籍地</strong>
          <span class="value">广州市海珠区新港中路鸿运花园2栋1207房</span>
        </div>
        <div class="table-item half"> 
          <strong class="label">现住址</strong>
          <span class="value">广州市海珠区滨江东路12号</span>
        </div>  
      </div>
      <div class="case-info key-value-infos-table">
        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>持有物品
          </strong>
          <span class="value">70-4D-7B-6A-B4-A0(MAC)    89802010184 (IMEI);</span>
        </div>
        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>银行卡号
          </strong>
          <span class="value">
            260 848004306436426（借记卡，厦港支行）；   290 848004306436488（信用卡，湖滨支行）
          </span>
        </div>

        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>QQ号码
          </strong>
          <span class="value">
            8696354632（正在输入）； 696354632（大海）
          </span>
        </div>

        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>微信号码
          </strong>
          <span class="value">
            18696354632（强哥）
          </span>
        </div>

        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>TalkBox
          </strong>
          <span class="value">
            96354632
          </span>
        </div>

        <div class="table-item">
          <strong class="label">
            <i class="el-icon el-icon-info"></i>车牌号码
          </strong>
          <span class="value">
            粤A980A2
          </span>
        </div>
      </div>
    </div>
  </div>

  <div slot="footer" class="footer" >
    <xdh-title title="最新动态" theme="danger" border icon="el-icon-menu"></xdh-title>
    <div class="news"> 2017-12-09  因盗窃案在【XX拘留所】拘留</div>
    <div class="news"> 2017-12-08  在汉庭酒店禾祥西路店入住</div>
  </div>
</xdh-panel>
</template>

<style lang="scss" scoped>
@import '../../style/_vars.scss';

.base-info-block{ 
  .base-info{
    display: flex;
    flex-flow: row nowrap;
    &-right{
      flex: 0 0 25%;
      width: 25%;
      max-width: 450px;
      min-width: 300px;
    }
    &-left{
      flex: 1;
      padding-left: 10px;
      .person-info.key-value-infos-table{
        padding: 0;
        .table-item{
          height: 32px;
          line-height: 32px;
          border-bottom: 1px dashed gray;
        }
      }
      .case-info.key-value-infos-table{
        padding: 0;
        .table-item{
          i.el-icon{
            color: $--color-primary;
            margin-right: 5px;
          }
          // border-bottom: 1px dashed gray;
        }
      }
    }
  }
  .footer{
    padding: 5px 20px;
    background:#eee; 
  }
  
}
</style>

<script>
import XdhPanel from '@/widgets/xdh-panel'
import XdhTitle from '@/widgets/xdh-title'
import editTags from '@/components/common/edit-tags'
import SwitchImage from '@/components/common/switch-image'
export default {
  name: 'baseInfo',
  components: {
    XdhPanel,
    editTags,
    XdhTitle,
    SwitchImage
  },
  props: {
    
    
  },
  data() {
    return {
      
      
    }
  },
  computed: {
   
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

